<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/test.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<script src="js/jquery-3.5.1.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/bookstore.js"></script>
</head>
<body class="body">
<!--头部-->
<div class="header">
   <div class="logo"><a href="Index.html" style="color: #000000;">GoodBooks</a></div>
   <div class="tab_bar">
   	<div class="btn-group header-menu">
   		<button type="button" class="btn btn-default dropdown-toggle" 
   				data-toggle="dropdown">
   			menu <span class="caret"></span>
   		</button>
   		<ul class="dropdown-menu " style="top: 65%;" role="menu">
   			<li><a href="#">功能</a></li>
   			<li><a href="#">另一个功能</a></li>
   			<li><a href="#">其他</a></li>
   			<li class="divider"></li>
   			<li><a href="#">个人信息设置</a></li>
   		</ul>
   	</div>
       <button class="header-item btn btn-default" id="login"><a href="#myModal" data-toggle="modal">log in</a></button>
	   <div class="header-item btn btn-default show-cart">
			<a href="#showCart"  data-toggle="modal">
				<img src="image/img_1.png" width="20px" height="22px">
				Cart(2)
			</a>
	   </div>
   </div>
</div>
<!--内容部分-->
<div class="content">
    <div class="content-price">
        <div class="text-icon">~~~</div>
        <div class="price-text">The Monocle Guide To Good Business</div>
        <div class="price">$65</div>
    </div>
<!--    图书介绍和展示-->
    <div class="content-book">
<!--        左边介绍-->
        <div class="book-left">
            <div class="book-introduce">
               <p> The Monocle Guide to Good Business is a book for would-be business leaders, start-ups, and established companies that feel it’s time for some new ideas.
                   It’s a book made to be used. Write in its margins and turn over the corners of its pages. But don’t expect management speak or miracles for untold riches.
               </p>
                <p>
                    This is not a book about staging a revolution. Rather, this is a book about doing things well—from how you run the show to the pens you buy. And even about taking your dog to work.
                    The 300-page book features original photography and illustrations printed on a selection of the highest-quality papers.
                </p>
                <p>
                    The Monocle Guide to Good Business is a handbook for those who want to make a company that will last;
                    it’s the ultimate reference for doing a job you love.
                </p>
            </div>
        </div>
<!--        右边购物车-->
        <div class="book-right">
            <div class="book-cart">
                <div class="book-cart-title">
                    <div class="cart-title">The Monocle Guide To Good Business</div>
                    <div style="text-align: right">$65</div>
                </div>
                <div class="text-monocle">
                    Monocle
                    <img src="image/ArrowTopRight.png">
                </div>
                <div class="cart">
                    <img class="plus" src="image/SignPlus.png" height="24px" width="24px" style="margin-right: 8px;">
                    Add to Cart
                </div>
                <div class="page-box">
                    <div class="text-box">
                        <p>Features</p>
                        <p>Published by</p>
                        <p>Printed in</p>
                        <p>Dimensions</p>
                    </div>
                    <div class="page-numBox">
                        <p>300 pages , linen hard cover</p>
                        <p>Gestalten</p>
                        <p>Germany</p>
                        <p>20cm x 26.5cm x 3cm</p>
                    </div>
                </div>
            </div>
        </div>
<!--        图书图片-->
        <div class="book-image">
            <img src="image/book.png" width="588px" height="730px">
        </div>
    </div>
	<!-- 搜索框 -->
	<div class="query-box">
		<input type="text" id="" placeholder="~~~ More business and entrepreneurship books" />
		<img src="image/IconFrame.png" />
	</div>
	<!-- 推荐图书 -->
	<div class="book-box">
		<div class="book-item">
			<a href="#">
				<div class="book-img">
					<img src="image/img.png" width="100%">
				</div>
			</a>
			<div></div>
			<div class="book-info">
				<div>
					<a href="#" class="text-a">
						<p class="book-name">The monocle guide to good business</p>
					</a>
					<p class="book-icon">Tyler Brûlé</p>
				</div>
				<div class="book-price">$ 65</div>
			</div>
		</div>
		<div class="book-item">
			<a href="#">
				<div class="book-img">
					<img src="image/img.png" width="100%">
				</div>
			</a>
			<div></div>
			<div class="book-info">
				<div>
					<a href="#"  class="text-a">
						<p class="book-name">The monocle guide to good business</p>
					</a>
					<p class="book-icon">Tyler Brûlé</p>
				</div>
				<div class="book-price">$ 65</div>
			</div>
		</div>
		<div class="book-item">
			<a href="#" >
				<div class="book-img">
					<img src="image/img.png" width="100%">
				</div>
			</a>
			<div></div>
			<div class="book-info">
				<div>
					<a href="#" class="text-a">
						<p class="book-name">The monocle guide to good business</p>
					</a>
					<p class="book-icon">Tyler Brûlé</p>
				</div>
				<div class="book-price">$ 65</div>
			</div>
		</div>
		<div class="book-item">
			<a href="#" >
				<div class="book-img">
					<img src="image/img.png" width="100%">
				</div>
			</a>
			<div></div>
			<div class="book-info">
				<div>
					<a href="#" class="text-a">
						<p class="book-name">The monocle guide to good business</p>
					</a>
					<p class="book-icon">Tyler Brûlé</p>
				</div>
				<div class="book-price">$ 65</div>
			</div>
		</div>
	</div>
</div>
<!--底部-->
<div class="footer">
	<div class="footer-box">
		<div class="footer-label">
			<p><a href="#">All books</a></p>
			<p><a href="#">Architecture</a></p>
			<p><a href="#">Arts & Entertainment</a></p>
			<p><a href="#">Bios & Memoirs</a></p>
			<p><a href="#">Business & Management</a></p>
			<p><a href="#">Design & Print</a></p>
		</div>
		<div class="footer-label">
			<p><a href="#">Economic & Politics</a></p>
			<p><a href="#">Fiction</a></p>
			<p><a href="#">Graphic Design</a></p>
			<p><a href="#">Health & Fitness</a></p>
			<p><a href="#">Business & Management</a></p>
			<p><a href="#">Design & Print</a></p>
		</div>
		<div class="footer-label">
			<p><a href="#">Non-Fiction</a></p>
			<p><a href="#">Philosophy</a></p>
			<p><a href="#">Photograhpy</a></p>
			<p><a href="#">Productivity</a></p>
			<p><a href="#">Psychology</a></p>
			<p><a href="#">Science & Nature</a></p>
		</div>
		<div class="footer-label">
			<p><a href="#">Self Improvement</a></p>
			<p><a href="#">Architecture</a></p>
			<p><a href="#">Technology</a></p>
		</div>
		<div class="footer-label">
			<p><a href="#">Ablout us</a></p>
			<p><a href="#">Contact</a></p>
			<p><a href="#">Support</a></p>
			<p><a href="#">Privacy</a></p>
			<p><a href="#">Privacy</a></p>
			<p><a href="#">Cookies</a></p>
		</div>
	</div>
	<div class="footer-author">
		<div class="logo">goodbooks</div>
		<div class="author">Designed by lu.</div>
	</div>
</div>
<!-- 登录模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 200px;">
    <div class="modal-dialog">
        <div class="modal-content" style="height: 360px;">
            <div class="modal-header" style="border: none;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <!-- <h4 class="modal-title" id="myModalLabel">login</h4> -->
            </div>
			<h3 class="login-title" style="text-align: center;">Login</h3>
            <!-- <div class="modal-body"></div> -->
			<form class="form-horizontal" role="form" style="margin-top: 30px;">
				<div class="form-group" style="display: flex; margin-left: 80px;">
					<label for="firstname" class="col-sm-2 control-label">用户名</label>
					<input type="text" class="form-control" id="firstname" placeholder="请输入用户名" style="width: 320px;">
				</div>
				<div class="form-group" style="display: flex; margin-left: 80px;">
					<label for="lastname" class="col-sm-2 control-label">密码</label>
					<input type="text" class="form-control" id="lastname" placeholder="请输入密码" style="width: 320px;">
				</div>
				<div class="form-group" style="margin-left: 65px;">
					<div class="col-sm-offset-2 col-sm-10">
						<div class="checkbox" style="display: flex;">
							<a class="forgot-pw" href="#">Forgot password ?</a>
							<a class="register" href="#register" data-toggle="modal" >Register now</a>
						</div>
					</div>
				</div>
				<div class="form-group">
					<input class="login-btn" type="submit" value="LOGIN"/>
				</div>
			</form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 注册模态框（Modal） -->
<div class="modal fade" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 100px;">
    <div class="modal-dialog">
        <div class="modal-content" style="height: 500px;">
            <div class="modal-header" style="border: none;">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <!-- <h4 class="modal-title" id="myModalLabel">login</h4> -->
            </div>
			<h3 class="login-title" style="text-align: center;">Create Account</h3>
            <!-- <div class="modal-body"></div> -->
			<form class="form-horizontal" role="form" style="margin-top: 30px;">
				<div class="form-group" style="display: flex; margin-left: 20px;">
					<label for="firstname" class="col-sm-3 control-label">用户名</label>
					<input type="text" class="form-control" id="firstname" placeholder="请输入用户名" style="width: 320px;">
				</div>
				<div class="form-group" style="display: flex; margin-left: 20px;">
					<label for="lastname" class="col-sm-3 control-label">密码</label>
					<input type="text" class="form-control" id="lastname" placeholder="请输入密码" style="width: 320px;">
				</div>
				<div class="form-group" style="display: flex; margin-left: 20px;">
					<label for="lastname" class="col-sm-3 control-label">确认密码</label>
					<input type="text" class="form-control" id="lastname" placeholder="请再次输入密码" style="width: 320px;">
				</div>
				<div class="form-group" style="display: flex; margin-left: 20px;">
					<label for="lastname" class="col-sm-3 control-label">性别</label>
					<label class="radio-inline">
						<input type="radio" name="sex" value="男" checked> 男
					</label>
					<label class="radio-inline">
						<input type="radio" name="sex" value="女"> 女
					</label>
				</div>
				<div class="form-group" style="display: flex; margin-left: 20px;">
					<label for="lastname" class="col-sm-3 control-label">邮箱</label>
					<input type="text" class="form-control" id="lastname" placeholder="请输入邮箱" style="width: 320px;">
				</div>
				<div class="form-group" style="margin-left: 65px;">
					<div class="col-sm-offset-2 col-sm-10">
						<div class="checkbox" style="display: flex;">
							<a class="register" href="#myModal" data-toggle="modal">Existing account, return to login</a>
						</div>
					</div>
				</div>
				<div class="form-group">
					<input class="login-btn" type="submit" value="LOGIN"/>
				</div>
			</form>
           <!-- <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">提交更改</button>
            </div> -->
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 购物车显示框 -->
<div class="mantle">
	<div class="show-cart-box">
		<div class="show-cart-header">
			<div class="show-cart-icon"><</div>
			<div class="show-cart-img"><img src="image/shoppingbag.png">(4)</div>
		</div>
		<div class="show-cart-list">
			<div class="show-cart-item">
				<img src="image/img.png">
				<div style="width: 100%">
					<div class="show-cart-info">
						<p>The monocle guide to good business</p>
						<div class="show-cart-price">$65</div>
					</div>
					<div class="cart-btn-box">
						<div class="cart-plus">+</div>
						<div class="cart-num">2</div>
						<div class="cart-reduce">-</div>
					</div>
				</div>
			</div>
			<div class="show-cart-item">
				<img src="image/img.png">
				<div style="width: 100%">
					<div class="show-cart-info">
						<p>The monocle guide to good business</p>
						<div class="show-cart-price">$65</div>
					</div>
					<div class="cart-btn-box">
						<div class="cart-plus">+</div>
						<div class="cart-num">2</div>
						<div class="cart-reduce">-</div>
					</div>
				</div>
			</div>
			<div class="show-cart-item">
				<img src="image/img.png">
				<div style="width: 100%">
					<div class="show-cart-info">
						<p>The monocle guide to good business</p>
						<div class="show-cart-price">$65</div>
					</div>
					<div class="cart-btn-box">
						<div class="cart-plus">+</div>
						<div class="cart-num">2</div>
						<div class="cart-reduce">-</div>
					</div>
				</div>
			</div>
			<div class="show-cart-item">
				<img src="image/img.png">
				<div style="width: 100%">
					<div class="show-cart-info">
						<p>The monocle guide to good business</p>
						<div class="show-cart-price">$65</div>
					</div>
					<div class="cart-btn-box">
						<div class="cart-plus">+</div>
						<div class="cart-num">2</div>
						<div class="cart-reduce">-</div>
					</div>
				</div>
			</div>
			<div class="show-cart-item">
				<img src="image/img.png">
				<div style="width: 100%">
					<div class="show-cart-info">
						<p>The monocle guide to good business</p>
						<div class="show-cart-price">$65</div>
					</div>
					<div class="cart-btn-box">
						<div class="cart-plus">+</div>
						<div class="cart-num">2</div>
						<div class="cart-reduce">-</div>
					</div>
				</div>
			</div>
			<div class="show-cart-item">
				<img src="image/img.png">
				<div style="width: 100%">
					<div class="show-cart-info">
						<p>The monocle guide to good business</p>
						<div class="show-cart-price">$65</div>
					</div>
					<div class="cart-btn-box">
						<div class="cart-plus">+</div>
						<div class="cart-num">2</div>
						<div class="cart-reduce">-</div>
					</div>
				</div>
			</div>
			<div class="show-cart-item">
				<img src="image/img.png">
				<div style="width: 100%">
					<div class="show-cart-info">
						<p>The monocle guide to good business</p>
						<div class="show-cart-price">$65</div>
					</div>
					<div class="cart-btn-box">
						<div class="cart-plus">+</div>
						<div class="cart-num">2</div>
						<div class="cart-reduce">-</div>
					</div>
				</div>
			</div>
		</div>
		<div class="cart-total-amount">
			<div class="total-amount">
				<div class="subtotal">Subtotal</div>
				<div class="control-label-num">$ 325</div>
			</div>
			<div class="total-amount">
				<div class="shipping">Shipping</div>
				<div class="control-label-num">$ 16</div>
			</div>
			<div class="total-amount-btn">
				CHECKOUT
			</div>
		</div>
	</div>
</div>
</body>
</html>